<template>
  <el-dialog v-model="dialogVisible" title="添加附加费用" width="800px" class="base_dialog home_page_dialog">
    <div class="content">
      <div class="base_screen_header">
        <span></span>
        <el-form :inline="true" class="base_search_form" @submit.prevent>
          <el-form-item>
            <el-input v-model="params.groupName" @keyup[native].enter="getData" @change="getData" placeholder="一级名称"
              clearable :suffix-icon="Search" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="params.extraName" @keyup[native].enter="getData" @change="getData" placeholder="二级名称"
              clearable :suffix-icon="Search" />
          </el-form-item>
        </el-form>
      </div>
      <DataCollectTable ref="tableRef" :data="data" :config="config" :total="total" :isRoute="false"
        @pageChange="pageChange">
      </DataCollectTable>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="saveAdditional" type="primary">保存</el-button>
        <el-button @click="close">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, defineEmits, defineExpose, defineProps, watch } from "vue";
import { $msg } from "@ui/msg";
import DataCollectTable from "@com/table/DataCollectTable.vue";
import { OP_KEY, COLUMN_TYPE, OPERATIONS } from "@com/table/tableOperations";
import { Search } from "@element-plus/icons-vue";
import $ from "@util/base";
import api from "@api/additionalFees";

const emit = defineEmits(["chooseAdditional"]);

const dialogVisible = ref(false);

const name = ref("");

const total = ref(0);
const data = ref([]);

const config = {
  showSelection: true,
  showIndex: true,
  column: [
    {
      label: '一级名称',
      prop: 'groupName',
    }, {
      label: '二级名称',
      prop: 'extraName',
    }, {
      label: '费用金额',
      prop: 'extraPrice',
    }, {
      label: '供应商',
      prop: 'supplier',
    }, {
      label: '费用详情',
      prop: 'picUrl',
      type: COLUMN_TYPE.picture,
      width: 100,
    }
  ],
};

const params = ref({
  groupName: null,
  extraName: null,
  page: null,
  size: null,
});

function pageChange(key, val) {
  params.value[key] = val;
  getData();
}

getData()

function getData() {
  api.list(params.value,
    (val) => {
      total.value = val.total;
      data.value = val.itemList;
    }
  );
}

const tableRef = ref(null);

function getSelection() {
  let data = tableRef.value.getSelectData();
  data = data.map(item => { return item.code })
  return data
}

function getSelectData() {
  let data = tableRef.value.getSelectData();
  return data
}

function clearSelection() {
  tableRef.value.clearSelection()
}

function empty() {
  total.value = 0;
  data.value = [];
}

function saveAdditional() {
  let data = getSelectData();
  if ($.isEmpty(data)) {
    $msg.error("请勾选需要添加的附加费用");
  } else {
    emit("chooseAdditional", data)
    close();
  }
}

function show(val) {
  dialogVisible.value = true;
  if (!tableRef.value) {
    return
  }
  clearSelection()
}

function close() {
  dialogVisible.value = false;
}
defineExpose({ show });
</script>

<style lang="scss">
.right {
  text-align: right;
}

.input_width {
  width: 160px;
}

.m_b_15 {
  margin-bottom: 15px;
}
</style>